<template>
   <div>
     <!-- <div class="search">
        <div class="search-input">
          <icon type="search" class="serach-icon" size="32rpx"/>搜索
        </div>
     </div> -->
     <search></search>
     <!-- 轮播图 -->
    <swiper indicator-dots autoplay circular :indicator-color="color" class="slide"       :indicator-active-color="activeColor">
      <block v-for="(item,index) in imgUrls" :key="index">
        <swiper-item>
          <image :src="item.image_src" class="slide-image image" width="355" height="150" />
        </swiper-item>
      </block>
    </swiper>
    <!-- menu按钮列表 -->
    <div class="menu">
        <div class="menu-img" v-for="(item,index) in menuImg" :key="index">
            <image :src="item.image_src" class="imgMenu"></image>
        </div>
    </div>
    <!-- 楼层图 -->
    <div class="floor">
      <div class="floor-item" v-for="(item,index) in floordata" :key="index">
      <!-- 标题 -->
      <div class="floor-header">
        <image :src="item.floor_title.image_src" class="floor-title" mode="aspectFit"></image>
      </div>
      <div class="floor-content">
        <div class="floor-left">
          <image :src="item.product_list[0].image_src" class="left-photo"></image>
        </div>
        <div class="floor-right">
          <image  v-for="(subItem,subIndex) in item.product_list" v-show="subIndex != 0" :src="subItem.image_src" :key="subIndex" class="right-photo"></image>
        </div>
      </div>
      </div>
    </div>
   </div>
</template>
<script>
import request from '../../utils/request.js'
import search from '../../components/search'
export default {
  data() {
    return  {
      imgUrls:[
        "https://img.alicdn.com/tfs/TB1N7tuGY2pK1RjSZFsXXaNlXXa-520-280.jpg",
        "https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg",
        "https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"
      ],
      color:'#ccc',
      activeColor:'#fff',
      menuImg:[],
      floordata:[]
    }
  },
  components: {
      search
  },
  created () {
    // 使用that存储this指向原因
    // 1.减少this开销
    // 2.在下面返回的结果中this指向的是wx不是全局
    // 3.如果下方的返回信息使用箭头函数返回也可以使用this success:(res) => {}
    let that = this

    // wx.request({
    //   url:'https://itjustfun.cn/api/public/v1/home/swiperdata',
    //   success(res) {
    //     // console.log(res)
    //     that.imgUrls = res.data.data
    //   }
    // }),
    // wx.request({
    //   url:'https://itjustfun.cn/api/public/v1/home/catitems',
    //   success:(res => {
    //     console.log(res)
    //     this.menuImg = res.data.data
    //   })
    // })
    request('https://www.zhengzhicheng.cn/api/public/v1/home/swiperdata').then(res => {
      // console.log(res)
      this.imgUrls = res.data.message
    })
    request('https://www.zhengzhicheng.cn/api/public/v1/home/catitems').then(res => {
      // console.log(res)
      this.menuImg = res.data.message
    })
    request('https://www.zhengzhicheng.cn/api/public/v1/home/floordata').then(res => {
      // console.log(res)
      this.floordata = res.data.message
    })

  }
}
</script>
<style lang="scss" scoped>
/* 搜索框样式 */
// .search {
//   background-color: #ff2d4a;
//   /* padding: 20rpx 16rpx;  */
//   position: fixed;
//   width: 100%;
// }
// .search-input {
//   height: 60rpx;
//   background-color: #fff;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   color: #bbb;
//   font-size: 24rpx;
//   margin: 20rpx 16rpx ;
// }
// .serach-icon {
//   margin-right: 5px;
// }
.slide {
  padding-top: 100rpx;
  height: 340rpx;
}
.image {
  width: 100%;
  height: 100%;
}
.menu {
  display: flex;
  justify-content: space-around;
  padding: 24px 0;
}
.imgMenu {
  height: 140rpx;
  width: 128rpx;
}
// 楼层图
.floor {
  // background-color: pink;
  .floor-header {
    .floor-title{
      height: 90rpx;
      width: 100%;
    }
  }
  .floor-content{
    display: flex;
    // margin-bottom: 20rpx;
    // padding: 0 16px;
    .floor-left{
      margin-left: 16rpx;
      .left-photo {
        height: 365rpx;
        width: 232rpx;
      }
    }
    .floor-right{
      display: flex;
      flex-wrap: wrap;
      margin-left:10rpx;
      .right-photo {
        height: 180rpx;
        width: 230rpx;
        &:nth-child(even){
          margin-right: 10rpx;
        }
      
      }
    }
  }
}
</style>

